<template>
    <div class="chat-right-box">
      <div v-if="this.Message.toName == undefined">
        <div style="height: 70px"></div>
        <el-empty
          :image-size="200"
          :description="$t('chat.content.description')"
        ></el-empty>
      </div>
      <div v-else>
      <div>
        <div class="chat-right-head">
          <a href="javascript:;">
            <div class="chat-right-head-nickname">
              {{targetUserInfo.userNickname==''?targetUserInfo.userId:targetUserInfo.userNickname}}
            </div>
          </a>
        </div>
        <div class="chat-content-box"id="chat-content-box">
          <div v-resize="toBottom" >
            <div v-for="(value,index) in textArr.news" :key="index">
              <div v-if="index%2 == 0 && value != ''" class="new newsR-list">
                <div v-if="datetimeArr.datetime[index] != ''" class="newsR-time">
                  {{datetimeArr.datetime[index]}}
                </div>
                <div class="newsR-box">
                  <router-link target="_blank" :to="{path:'/userHomePage',query:{userId : currentUserInfo.userId}}">
                    <div class="newsR-head">
                      <img :src=currentUserInfo.userHeadPortrait width="30px" style="border-radius: 50%;" alt="">
                    </div>
                  </router-link>
                  <div class="newsR-body">
                    <div :title="$t('chat.content.deleteTitle')" @contextmenu.prevent="rightClick($event)" class="newsR-body-content">
                      <!-- 弹窗 -->
                      <div class="sel-list-boxR">
                        <div @click="delOneMessage(index,targetUserInfo.userId,$event)">
                          <a href="javascript:;">{{$t('chat.content.delete')}}</a>
                        </div>
                        <div @click="cancel($event)">
                          <a href="javascript:;">{{$t('chat.content.cancel')}}</a>
                        </div>
                      </div>
                      <!-- 汽包小尾巴 -->
                      <div class="newsR-body-tip"></div>
                      <a v-if="value.length <= 300 && !value.includes('icon-')" href="javascript:;" style="color: #2d2d2d">
                        <span>{{value}}</span>
                      </a>
                      <a v-else-if="value.includes('icon-')" href="javascript:;" style="color: #2d2d2d">
                        <i :class=value></i>
                      </a>
                      <a v-viewer v-else-if="value.length > 300">
                        <img :src=value style="cursor:pointer">
                      </a>
                    </div>
                  </div>
                </div>
                <div style="clear:both;"></div>
              </div>
              <div v-else-if="index%2 == 1 && value != ''" class="new newsL-list">
                <div v-if="datetimeArr.datetime[index] != ''" class="newsL-time">
                  {{datetimeArr.datetime[index]}}
                </div>
                <div class="newsL-box">
                  <router-link target="_blank" :to="{path:'/userHomePage',query:{userId : targetUserInfo.userId}}">
                    <div class="newsL-head">
                      <img :src=targetUserInfo.userHeadPortrait width="30px" style="border-radius: 50%;" alt="">
                    </div>
                  </router-link>
                  <div class="newsL-body">
                    <div @contextmenu.prevent="rightClick($event)" :title="$t('chat.content.deleteTitle')"  class="newsL-body-content">
                      <!-- 弹窗 -->
                      <div class="sel-list-boxL">
                        <div @click="delOneMessage(index,targetUserInfo.userId,$event)">
                          <a href="javascript:;">{{$t('chat.content.delete')}}</a>
                        </div>
                        <div @click="cancel($event)">
                          <a href="javascript:;">{{$t('chat.content.cancel')}}</a>
                        </div>
                      </div>
                      <!-- 汽包小尾巴 -->
                      <div class="newsL-body-tip"></div>
                      <a v-if="value.length <= 300 && !value.includes('icon-')" href="javascript:;" style="color: #2d2d2d">
                        <span>{{value}}</span>
                      </a>
                      <a v-else-if="value.includes('icon-')" href="javascript:;" style="color: #2d2d2d">
                        <i :class=value></i>
                      </a>
                      <a v-viewer v-else-if="value.length > 300">
                        <img :src=value style="cursor:pointer">
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chat-content-edit">
          <div>
            <el-upload
              class="avatar-uploader tupian"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
              <i class="iconfont2 icon-tupian"></i>
            </el-upload>
            <div class="biaoqing" id="biaoqing" @mouseover="openPiaoqing" @mouseout="closePiaoqing">
              <i class="iconfont2 icon-biaoqing" @click="showBiaoqing"></i>
              <div class="biaoqing-box" id="biaoqing-box">
                <div class="biaoqing-box-tip"></div>
                <div class="biaoqing-box-content">
                  <div class="biaoqing-contain">
                    <a href="javascript:;" v-for="i in 10" :key="i">
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-goofy')">
                        <i class="iconfont icon-goofy"></i>
                      </div>
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-grubby')">
                        <i class="iconfont icon-grubby"></i>
                      </div>
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-skeleton')">
                        <i class="iconfont icon-skeleton"></i>
                      </div>
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-gentleman-')">
                        <i class="iconfont icon-gentleman-"></i>
                      </div>
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-goofy-')">
                        <i class="iconfont icon-goofy-"></i>
                      </div>
                      <div class="biaoqing-item" @click="sendPiaoqing('iconfont icon-rich-')">
                        <i class="iconfont icon-rich-"></i>
                      </div>
                    </a>
                    <div style="clear: both"></div>
                  </div>
                </div>
              </div>
            </div>
            <textarea
              maxlength="300"
              :placeholder="$t('chat.content.placeholder')"
              v-model="Message.message"
              @keydown="handlePushKeyword($event)"
            ></textarea>
          </div>
          <div class="submit">
            <div class="current-text-counts">{{Message.message.length}}/300</div>
            <a href="javascript:;">
              <div class="submit-btn" @click="onSubmit(Message)">{{$t('chat.content.send')}}</div>
            </a>
          </div>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
    let myselfMessageIndex = 0
    let otherMessageIndex = 1
    export default {
        name: "Chat-Content",
        directives: {  // 使用局部注册指令的方式
            resize: { // 指令的名称
                bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
                    let width = '', height = '';
                    function isReize() {
                        const style = document.defaultView.getComputedStyle(el);
                        if (width !== style.width || height !== style.height) {
                            binding.value();  // 关键
                        }
                        width = style.width;
                        height = style.height;
                    }
                    el.__vueSetInterval__ = setInterval(isReize, 100);
                },
                unbind(el) {
                    clearInterval(el.__vueSetInterval__);
                }
            }
        },
        data(){
            return{
                websock: null,
                textArr:{
                    news:[],
                },
                datetimeArr:{
                    datetime:[],
                },
                textArr2:{
                    news:[],
                },
                datetimeArr2:{
                    datetime:[],
                },
                infoLen:0,

                Message:{
                    toName:this.$route.query.userId,  // 这个是当前聊天用户的ID
                    message:'',
                },

                Message4Img:{
                    toName:this.$route.query.userId,  // 这个是发送图片使用
                    message:'',
                },

                Message4Icon:{
                    toName:this.$route.query.userId,  // 这个是发送表情使用
                    message:'',
                },

                currentUserInfo:'',
                targetUserInfo:'',

                baseURL:'http://localhost:8081/user/getCurrentUserInfo',
                baseURL2:'http://localhost:8081/user/getUserInfoById/',
                baseURL3:'http://localhost:8081/cache/initChatRecordOfText/',
                baseURL4:'http://localhost:8081/cache/initChatRecordOfDatetime/',
                baseURL5:'http://localhost:8081/cache/saveChatOfText/',
                baseURL6:'http://localhost:8081/cache/saveChatOfDatetime/',
                baseURL9:'http://localhost:8081/cache/image/',

                firstSendOrReceive:true,

                baseURL7:'http://localhost:8081/cache/chatList/',

                baseURL8:'http://localhost:8081/cache/setNewNewsTips/',

                demo:''

            }
        },
        created() {
            this.initWebSocket();
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            "$route": function () {
                this.$emit("userId",this.$route.query.userId)
                // 重新设置 toName
                this.Message.toName = this.$route.query.userId

                this.initChatRecordOfText(this.$route.query.userId)
                this.initChatRecordOfDatetime(this.$route.query.userId)
                this.getTargetUserInfo(this.$route.query.userId)
                this.getCurrentUserInfo(this.$route.query.userId)
                this.toBottom()
            }
        },
        // 自定义指令，监控div的width和高发生变化后执行相应的方法
        mounted(){
            this.$emit("userId",this.$route.query.userId)

            this.initChatRecordOfText(this.$route.query.userId)
            this.initChatRecordOfDatetime(this.$route.query.userId)
            this.getTargetUserInfo(this.$route.query.userId)
            this.getCurrentUserInfo(this.$route.query.userId)
            this.toBottom()
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        methods:{
            initWebSocket(){ //初始化weosocket
                const socketUrl  = "ws://localhost:8081/chat";
                this.websock = new WebSocket(socketUrl );
                this.websock.onmessage = this.onMessage;
                this.websock.onopen = this.onOpen;
                this.websock.onerror = this.onError;
                this.websock.onclose = this.onClose;
            },
            onOpen(){
                console.log(this.$t('chat.content.webSockLog1'));
            },
            onError(){
                this.initWebSocket();
            },
            onClose(e){  //关闭
                console.log(this.$t('chat.content.webSockLog2'),e);
            },
            send(Data){
                this.websock.send(Data);
            },
            // 接收用户发送的消息时
            onMessage(evt){
                //数据接收
                // 获取服务端推送的消息
                let dataStr = evt.data
                // resObj有三个元素：isSystem、fromName、message（Str）
                let resObj = JSON.parse(dataStr)
                // 判断是否是系统消息（isSystem，为true是系统消息，false不是系统消息）
                if(!resObj.system) {
                    if (resObj.fromName != this.$route.query.userId) { // 不是当前聊天人发送的消息时
                        // 当给我发消息的人与当前聊天的人不同时【我在线时】
                        // 将该用户加入到我的聊天列表中(包括了其在我聊天列表中和不在我的聊天列表中的两种情况，因为后台使用的是set集合，所以
                        // 对方在不在我的聊天列表中都可以使用)
                        this.axios(this.baseURL7+resObj.fromName).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                        // 获取聊天记录（文本、时间）
                        this.axios.post(this.baseURL3 + resObj.fromName).then(res=>{
                            // 将object转换成字符串，再将字符串转换成数组
                            this.textArr2.news = (res.data+"").split(",")
                            if ((this.textArr2.news.length-1)%2 == 0){
                                let len = this.textArr2.news.length
                                this.textArr2.news[len] = resObj.message
                            } else {
                                let len = this.textArr2.news.length
                                this.textArr2.news[len] = ''
                                this.textArr2.news[len+1] = resObj.message
                            }
                            this.saveChatOfText(resObj.fromName, this.textArr2)
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                        this.axios.post(this.baseURL4 + resObj.fromName).then(res=>{
                            this.datetimeArr2.datetime = (res.data+"").split(",")
                            if ((this.datetimeArr2.datetime.length-1)%2 == 0){
                                let len = this.datetimeArr2.datetime.length
                                this.datetimeArr2.datetime[len] = this.getCurrentDatetime()
                            } else {
                                let len = this.datetimeArr2.datetime.length
                                this.datetimeArr2.datetime[len] = ''
                                this.datetimeArr2.datetime[len+1] = this.getCurrentDatetime()
                            }
                            this.saveChatOfDatetime(resObj.fromName, this.datetimeArr2)
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                        // 重新加载聊天列表 （使得当前用户置顶并更新列表中显示的最后一条消息，以及红色圆圈消息提示）
                        this.setNewNewsTips(resObj.fromName)
                    } else { // 当给我发消息的人与当前聊天的人相同时
                        // 存储消息 + 显示消息
                        otherMessageIndex = this.receiveSetArr(otherMessageIndex,resObj.message)
                        myselfMessageIndex = otherMessageIndex +1

                        // 强制重新渲染视图
                        this.$forceUpdate();

                        this.saveChatOfText(this.$route.query.userId, this.textArr)
                        this.saveChatOfDatetime(this.$route.query.userId, this.datetimeArr)
                    }

                } else { // 说明有人上线或者离线了
                    // Set 转 Array
                    let onlineUser = Array.from(resObj.message)
                    this.$parent.reloadOnlineUser(onlineUser)
                }

            },
            // 点击发送消息按钮或回车时
            onSubmit(Message){
                // 去除字符串前面和字符串后面的空格
                Message.message = Message.message.replace(/(^\s*)/g, "").replace(/(\s*$)/g,"")
                if (Message.message != ''){
                    myselfMessageIndex = this.sendSetArr(myselfMessageIndex,Message.message)
                    otherMessageIndex = myselfMessageIndex +1

                    // 发送消息【消息在前端发送后需要在后端判断对方在不在线，如果在线就正常发送，如果离线那么就要将消息文本和时间进行缓存】
                    this.send(JSON.stringify(Message))
                    /**
                     * 【注意】只有被v-model绑定的数据发生变化后，vue才会重新渲染整个dom树，当我们发送图片/表情的时候，因为没有进行如何的
                     * v-model绑定，所有vue并不会重洗渲染dom，消息对话框也就不会被重新渲染。所以这里需要刺激vue让其重新渲染dom
                     */
                    this.Message.message = '...'
                    this.Message.message = ''

                    this.saveChatOfText(this.$route.query.userId, this.textArr)
                    this.saveChatOfDatetime(this.$route.query.userId, this.datetimeArr)
                } else {
                    this.Message.message = ''
                }
            },
            handlePushKeyword(event){
                if (event.keyCode === 13) {
                    event.preventDefault(); // 阻止浏览器默认换行操作
                    this.onSubmit(this.Message); // 发送消息
                    return false;
                }
            },

            // 初始化聊天记录（文本）
            initChatRecordOfText(userId){
                if (userId != undefined){
                    this.axios.post(this.baseURL3 + userId).then(res=>{
                        // 将object转换成字符串，再将字符串转换成数组
                        this.textArr.news = (res.data+"").split(",")
                        this.infoLen = this.textArr.news.length - 1
                        if (this.infoLen % 2 == 0){
                            otherMessageIndex = this.infoLen + 1
                            myselfMessageIndex = this.infoLen + 2
                        } else {
                            otherMessageIndex = this.infoLen + 2
                            myselfMessageIndex = this.infoLen + 1
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
                // 获取缓存的聊天记录

            },
            // 初始化聊天记录（时间）
            initChatRecordOfDatetime(userId){
                if (userId != undefined) {
                    this.axios.post(this.baseURL4 + userId).then(res => {
                        this.datetimeArr.datetime = (res.data + "").split(",")
                    }).catch(
                        exception => {
                            console.log(exception)
                        }
                    )
                }
            },
            // 持久化聊天记录（文本）
            saveChatOfText(userId,savedText){
                let configs = {
                    headers:{ 'Content-Type':'application/json'}  // 设置说明上传JSON
                };
                this.axios.post(this.baseURL5 + userId, savedText, configs).then(
                    res=>{
                        console.log(this.$t('chat.content.redisLog'))
                        this.$parent.reloadingList(userId)
                    }
                ).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            // 持久化聊天记录（时间）
            saveChatOfDatetime(userId,savedDatetime){
                let configs = {
                    headers:{ 'Content-Type':'application/json'}  // 设置说明上传JSON
                };
                this.axios.post(this.baseURL6 + userId, savedDatetime, configs).then(
                    res=>{
                        console.log(this.$t('chat.content.redisLog'))
                    }
                ).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },

            // 获取当前登录用户的信息
            getCurrentUserInfo(userId){
                if (userId != undefined) {
                    this.axios.post(this.baseURL).then(res => {
                        if (res.data != false) {
                            this.currentUserInfo = res.data
                        }
                    }).catch(
                        exception => {
                            console.log(exception)
                        }
                    )
                }
            },
            // 获取正在和我聊天用户的信息
            getTargetUserInfo(userId){
                if (userId != undefined) {
                    this.axios.post(this.baseURL2 + userId).then(res=>{
                        if(res.data != false){
                            this.targetUserInfo = res.data
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }

            },
            // 接收消息后向数组（news、datetime）中添加记录
            receiveSetArr(index, message){
                this.textArr.news[index] = message
                this.textArr.news[index+1] = ''
                this.datetimeArr.datetime[index+1] = ''

                if (this.datetimeArr.datetime[index-1] == undefined || this.textArr.news[index-1] == undefined) {
                    this.datetimeArr.datetime[index-1] = ''
                    this.textArr.news[index-1] = ''
                }
                if (this.firstSendOrReceive) {
                    this.datetimeArr.datetime[index] = this.getCurrentDatetime()
                    this.firstSendOrReceive = false
                }
                return index +2
            },
            // 发送消息后向数组（news、datetime）中添加记录
            sendSetArr(index,message){
                // this.textArr.news[index] = this.Message.message
                this.textArr.news[index] = message
                this.textArr.news[index+1] = ''
                this.datetimeArr.datetime[index+1] = ''

                if (this.datetimeArr.datetime[index-1] == undefined || this.textArr.news[index-1] == undefined) {
                    this.datetimeArr.datetime[index-1] = ''
                    this.textArr.news[index-1] = ''
                }
                if (this.firstSendOrReceive) {
                    this.datetimeArr.datetime[index] = this.getCurrentDatetime()
                    this.firstSendOrReceive = false
                } else {
                    this.datetimeArr.datetime[index] = ''
                }
                return index +2
            },

            setNewNewsTips(sendNewsUserId){
                this.axios.post(this.baseURL8 + sendNewsUserId).then().catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },

            // 获取当前时间
            getCurrentDatetime(){
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1):(date.getMonth()+1)
                let day = date.getDate() < 10 ? "0"+date.getDate():date.getDate()
                let hour = date.getHours() < 10 ? "0"+date.getHours():date.getHours()
                let minute = date.getMinutes() < 10? "0"+date.getMinutes():date.getMinutes()
                let second = date.getSeconds() < 10? "0"+date.getSeconds():date.getSeconds()
                return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
            },
            // 使得滚动条回到底部
            toBottom(){
                let scrollY = document.getElementById("chat-content-box")
                scrollY.scrollTop = scrollY.scrollHeight;
            },

            // 右击事件
            rightClick(e){
                e.currentTarget.firstElementChild.style.display="block"
            },
            // 删除消息
            delOneMessage(index,targetUserId,e){
                this.$confirm(this.$t('chat.content.confirm.info'), {
                    confirmButtonText: this.$t('chat.content.confirm.confirm'),
                    cancelButtonText: this.$t('chat.content.confirm.cancel'),
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    let temp_text = this.textArr.news[index]
                    let temp_datetime = this.datetimeArr.datetime[index]
                    this.textArr.news[index] = ''
                    this.datetimeArr.datetime[index] = ''
                    let configs = {
                        headers:{ 'Content-Type':'application/json'}  // 设置说明上传JSON
                    };
                    let del_tag = 1
                    // 删除时间
                    this.axios.post(this.baseURL6 + targetUserId, this.datetimeArr, configs)
                        .then(res=>{
                            // 删除消息
                            this.axios.post(this.baseURL5 + targetUserId, this.textArr, configs)
                                .then(res=>{
                                    this.successOpt(this.$t('chat.content.confirm.successTip'))
                                }).catch(exception=>{
                                    // 类似于回滚
                                    this.textArr.news[index] = temp_text
                                    this.datetimeArr.datetime[index] = temp_datetime
                                    this.saveChatOfText(targetUserId, this.textArr)
                                    this.saveChatOfDatetime(targetUserId, this.datetimeArr)
                                    this.failOpt(this.$t('chat.content.confirm.faiTip'))
                                }
                            )
                        }).catch(exception=>{
                            // 类似于回滚
                            this.datetimeArr.datetime[index] = temp_datetime
                            this.saveChatOfDatetime(targetUserId, this.datetimeArr)
                            this.failOpt(this.$t('chat.content.confirm.cancelTip'))
                            console.log(exception)
                        }
                    )
                    this.$forceUpdate();
                }).catch((exception) => {
                    console.log(this.$t('chat.content.confirm.cancelTip'))
                });
            },
            // 取消
            cancel(e){
                e.currentTarget.parentElement.style.display="none"
            },

            beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isJPG) {
                    this.$message.error(this.$t('chat.content.imageIllegal1'));
                } else if (!isLt2M) {
                    this.$message.error(this.$t('chat.content.imageIllegal2'));
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL9, forms, configs).then(res=>{
                        if (res.data==false){
                            this.$message.error(this.$t('chat.content.imageError'));
                        }else {
                            this.Message4Img.message = res.data
                            this.onSubmit(this.Message4Img)
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            showBiaoqing(){
                let item = document.getElementById("biaoqing-box")
                if (showBiaoqingCounts%2 == 0){
                    item.style.display = "block"
                } else {
                    item.style.display = "none"
                }
                showBiaoqingCounts++
            },
            openPiaoqing(){
                document.getElementById("biaoqing-box").style.display = "block"
            },
            closePiaoqing(){
                document.getElementById("biaoqing-box").style.display = "none"
            },
            sendPiaoqing(piaoqing){
                this.Message4Icon.message = piaoqing
                this.onSubmit(this.Message4Icon)
            },

            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }
        },
    }
    let showBiaoqingCounts = 0
</script>

<style scoped>
  .chat-right-box{
    float: left;
    width: 70%;
    height: 500px;
    background-color: rgb(255, 255, 255);
  }

  .chat-right-head{
    width: 100%;
    height: 60px;
    background-color: white;
    border-bottom: 1px solid rgb(221, 221, 221);
    position: relative;
  }
  .chat-right-head-nickname{
    width: 50%;
    font-size: 16px;
    color: #383838;
    position: absolute;
    left: 20px;
    top: 20px;
  }

  .chat-content-box{
    width: 100%;
    height: 300px;
    border-bottom: 1px solid rgb(221, 221, 221);

    overflow-y: scroll;
    overflow-x: hidden;
  }
  /*滚动条样式*/
  .chat-content-box::-webkit-scrollbar {
    width: 4px;
  }
  .chat-content-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(133, 133, 133, 0.2);
    background: rgba(133, 133, 133, 0.2);
  }
  .chat-content-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
    border-radius: 0;
    background: rgba(0,0,0,0);
  }

  .newsL-list{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .newsL-time{
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #a8a8a8;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    font-weight: lighter;
  }
  .newsL-box{
    width: 100%;
    min-height: 30px;
    position: relative;
  }
  .newsL-head{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #686868;
    border-color: #555555;
    position: absolute;
    left: 20px;
    top: 0px;
  }
  .newsL-body-content{
    /* 设置div的宽度随着文字的增长而增长，达到50%时宽度不变 */
    display:table;
    max-width: 70%;

    min-height: 10px;
    line-height: 18px;
    border-radius: 3px;
    letter-spacing: 1px;
    font-size: 14px;
    margin-left: 60px;
    color: #242424;
    background-color: rgb(225, 225, 225);
    padding: 7px 10px;
    position: relative;
  }

  .newsL-body-content img{
    max-width:100%
  }
  .newsL-body-tip{
    position: absolute;
    top: 10px;
    right: 100%;
    border-right: 5px solid  rgb(225, 225, 225);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
  }

  .newsR-list{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    /*background-color: tomato;*/
  }
  .newsR-time{
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #a8a8a8;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    font-weight: lighter;
  }
  .newsR-box{
    width: 100%;
    min-height: 30px;
    position: relative;
  }
  .newsR-head{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #686868;
    border-color: #555555;
    position: absolute;
    right: 20px;
    top: 0px;
  }
  .newsR-body-content{
    float: right;
    /* 设置div的宽度随着文字的增长而增长，达到50%时宽度不变 */
    display:table;
    max-width: 70%;

    min-height: 10px;
    line-height: 18px;
    border-radius: 3px;
    letter-spacing: 1px;
    font-size: 14px;
    margin-right: 60px;
    color: #242424;
    background-color: rgb(122, 209, 175);
    padding: 7px 10px;
    position: relative;
  }
  .newsR-body-content img{
    max-width:100%
  }
  .newsR-body-tip{
    position: absolute;
    top: 10px;
    left: 100%;
    border-left: 5px solid  rgb(122, 209, 175);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  .chat-content-edit{
    width: 100%;
    height: 140px;
    background-color: rgb(255, 255, 255);
  }
  .tupian{
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .tupian i{
    font-size: 20px;
    color: #9f9f9f;
  }
  .tupian i:hover{
    color: #4b4b4b;
  }
  .biaoqing{
    float: left;
    width: 20px;
    height: 20px;
    line-height: 21px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
  }
  .biaoqing i{
    font-size: 19px;
    color: #9f9f9f;
  }
  .biaoqing i:hover{
    color: #4b4b4b;
  }
  .biaoqing-box{
    display: none;
    width: 375px;
    height: 190px;
    position: absolute;
    top: -190px;
    left: -10px;
    background-color: transparent;
  }
  .biaoqing-box-tip{
    position: absolute;
    bottom: -2px;
    left: 14px;
    border-left: 6px solid  transparent;
    border-top: 6px solid white;
    border-bottom: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  .biaoqing-box-content{
    width: 360px;
    height: 160px;
    padding: 10px 10px;
    padding-right: 2px;
    border-radius: 6px;
    box-shadow: 0 0 20px #aeaeae;
    background-color: white;
  }
  .biaoqing-contain{
    overflow-y: scroll;
    width: 360px;
    height: 160px;
  }
  /*滚动条样式*/
  .biaoqing-contain::-webkit-scrollbar {
    width: 4px;
  }
  .biaoqing-contain::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(133, 133, 133, 0.13);
    background: rgba(133, 133, 133, 0.11);
  }
  .biaoqing-contain::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
    border-radius: 0;
    background: rgba(0,0,0,0);
  }
  .biaoqing-item{
    float:left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 6px;
    transition: 0.3s;
  }
  .biaoqing-item:hover{
    background-color: #e0e0e0;
  }
  .biaoqing-item i{
      font-size: 30px;
  }
  textarea{
    width: 93.8%;
    height: 55px;
    resize:none;   /*不允许用户调整元素大小*/
    border: #ffffff 1px solid;
    border-radius: 3px;
    padding: 0px 20px;
    color: #333333;
    letter-spacing: 1px;
    font-size: 14px;
    margin-top: 12px;
  }
  textarea::placeholder{
    color: #969696;
    font-weight: lighter;
    font-size: 14px;
  }
  textarea::-webkit-scrollbar {
    width: 3px;
  }
  textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(65, 65, 65, 0.2);
    background: rgba(172, 172, 172, 0.2);
  }
  textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
    border-radius: 0;
    background: rgba(0,0,0,0);
  }
  .submit{
    width: 100%;
    height: 35px;
    position: relative;
  }
  .current-text-counts{
    width: 60px;
    height: 35px;
    line-height: 35px;
    margin-left: 20px;
    font-size: 13px;
    color: #8e8e8e;
    font-weight: lighter;
  }
  .submit-btn{
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 3px;
    color: #6d6d6d;
    background-color: rgb(247, 247, 247);
    border: 1px solid rgb(216, 216, 216);

    position: absolute;
    top: 0px;
    right: 20px;
  }
  .submit-btn:hover{
    color: #f3f3f3;
    background-color: #6c6c6c;
  }
  .submit-btn:active{
    background-color: #4a4a4a;
  }

  .sel-list-boxR{
    display: none;
    position: absolute;
    bottom: 0px;
    left: -45px;
    width: 40px;
    background-color: rgb(122, 209, 175);
    border-radius: 2px;
  }
  .sel-list-boxR div {
    width: 100%;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 2px;
    letter-spacing: 1px;
  }
  .sel-list-boxR div a {
    color: #424242;
    font-size: 10px;
    display:inline-block; /*只有行内元素才可以缩放*/
    -webkit-transform:scale(0.85); /*缩放*/
  }
  .sel-list-boxR div:hover {
    background-color: rgb(107, 184, 154);
  }
  .sel-list-boxL{
    display: none;
    position: absolute;
    bottom: 0px;
    right: -45px;
    width: 40px;
    background-color: rgb(225, 225, 225);
    border-radius: 2px;
  }
  .sel-list-boxL div {
    width: 100%;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 2px;
    letter-spacing: 1px;
  }
  .sel-list-boxL div a {
    color: #424242;
    font-size: 10px;
    display:inline-block; /*只有行内元素才可以缩放*/
    -webkit-transform:scale(0.85); /*缩放*/
  }
  .sel-list-boxL div:hover {
    background-color: rgb(201, 201, 203);
  }

  .send-error{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    color: #f5e9cb;
    font-weight: bolder;
    position: absolute;
    top: 9px;
    left: -22px;
    background-color: #ff2d21
  }
</style>
